Page({
  data: {
    originalGroupedImages: [], // 存储所有原始图片组
    allGroupedImages: [], // 存储当前的图片组（用于搜索结果）
    displayedImages: [], // 当前展示的图片组
    searchKeyword: '', // 搜索关键词
    itemsPerPage: 5, // 每页展示的图片组数量
    currentPage: 1, // 当前页码
    totalPage: 1, // 总页码
  },

  onLoad: function() {
    // 页面加载时加载数据
    this.loadImages();
  },

  // onShow: function() {
  //   // 页面每次显示时重新加载数据
  //   this.loadImages();
  // },

  loadImages() {
    const db = wx.cloud.database();
    db.collection("exam-paper-img")
      .where({
        approved: true, // 筛选已审核的记录
      })
      .get()
      .then((res) => {
        const grouped = this.groupByTitle(res.data);
        this.setData({
          originalGroupedImages: grouped,
          allGroupedImages: grouped, // 初始化为所有原始数据
        });
        this.resetPagination();
        this.setPageImages();
      })
      .catch((err) => {
        console.error("加载图片失败", err);
      });
  },

  resetPagination() {
    const totalGroups = this.data.allGroupedImages.length;
    const totalPage = Math.ceil(totalGroups / this.data.itemsPerPage);
    this.setData({
      currentPage: 1,
      totalPage: totalPage,
    });
    this.setPageImages(); // Reset the displayed images with new pagination
  },

  setPageImages() {
    const allImages = this.data.allGroupedImages;
    const itemsPerPage = this.data.itemsPerPage;

    // 计算当前页开始和结束的索引
    const start = (this.data.currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;

    // 获取当前页的数据
    const displayed = allImages.slice(start, end);

    this.setData({
      displayedImages: displayed,
    });
  },

  groupByTitle(records) {
    const grouped = [];
    const titleMap = {};

    records.forEach((record) => {
      const title = record.title || "无标题"; // 如果 title 为空，使用默认值
      if (!titleMap[title]) {
        titleMap[title] = {
          title: title,
          images: [],
        };
        grouped.push(titleMap[title]);
      }
      titleMap[title].images.push(record.image); // 只存储图片的路径
    });

    // 按标题字母顺序排序
    grouped.sort((a, b) => a.title.localeCompare(b.title));

    console.log("分组结果:", grouped); // 输出分组结果到控制台
    return grouped;
  },

  onInputChange(e) {
    this.setData({
      searchKeyword: e.detail.value,
    });
  },

  onSearchIconTap() {
    this.filterImages();
  },

  filterImages() {
    const keyword = this.data.searchKeyword.toLowerCase().trim(); // 获取搜索关键词并转换为小写
    if (keyword === '') {
      // 如果搜索关键词为空，恢复显示所有图片组
      this.setData({
        allGroupedImages: this.data.originalGroupedImages, // 恢复所有数据
      });
      this.resetPagination();
      return;
    }
  
    // 创建正则表达式来进行模糊匹配
    const regex = new RegExp(keyword.split(/\s+/).map(word => `(?=.*${word})`).join(''), 'i'); 
  
    // 过滤图片组
    const filtered = this.data.originalGroupedImages.filter(group => 
      regex.test(group.title.toLowerCase()) || 
      group.images.some(image => regex.test(image.toLowerCase()))
    );
  
    this.setData({
      allGroupedImages: filtered,
    });
    console.log("搜索结果:", filtered); // 输出搜索结果到控制台
    this.resetPagination(); // Reset pagination for filtered results
  },

  previewImage(e) {
    let src = e.currentTarget.dataset.src; // 获取点击图片的云存储路径
    console.log("Cloud Path:", src);

    wx.cloud.getTempFileURL({
      fileList: [src], // 将云存储路径传递给 fileList 数组
      success: (res) => {
        const tempFileURL = res.fileList[0].tempFileURL; // 获取临时URL
        console.log("Temporary URL:", tempFileURL);

        wx.previewImage({
          current: tempFileURL, // 当前显示图片的http链接
          urls: [tempFileURL], // 需要预览的图片http链接列表
        });
      },
      fail: (err) => {
        console.error("获取临时URL失败", err);
      },
    });
  },

  // 翻页功能
  prevPage() {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1,
      });
      this.setPageImages();
    }
  },

  nextPage() {
    if (this.data.currentPage < this.data.totalPage) {
      this.setData({
        currentPage: this.data.currentPage + 1,
      });
      this.setPageImages();
    }
  },
});
